<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">

            <el-form-item label="菜单布局方向">
                <el-radio-group v-model="propJson.menuModelDirection">
                    <el-radio label="horizontal">横向</el-radio>
                    <el-radio label="vertical">纵向</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="子菜单展开方式" v-if="propJson.menuModelDirection === 'horizontal'">
                <el-radio-group v-model="propJson.menuTrigger">
                    <el-radio label="click">点击展开</el-radio>
                    <el-radio label="hover">悬浮展开</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="纵向高度" v-if="propJson.menuModelDirection === 'vertical'">
                <el-input v-model="propJson.menuHeight" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="菜单背景色">
                <el-color-picker v-model="propJson.backgroundColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="菜单字体颜色">
                <el-color-picker v-model="propJson.textColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="菜单激活字体颜色">
                <el-color-picker v-model="propJson.activeTextColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="是否只展示一个子菜单">
                <el-radio-group v-model="propJson.uniqueOpened">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="第一层级菜单字体大小">
                <el-input v-model="propJson.firstMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="第二层级菜单字体大小">
                <el-input v-model="propJson.secondMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="第三层级菜单字体大小">
                <el-input v-model="propJson.thirdMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="是否记录面包屑变量">
                <el-radio-group v-model="propJson.isRecordBreadCrumb">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="关联面包屑变量" v-if="propJson.isRecordBreadCrumb">
                <el-select v-model="propJson.breadCrumbVariable" placeholder="关联面包屑变量" style="width: 100%" >
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <span>菜单编辑:</span> <br/><br/>
            <el-button type="primary" plain size="small" @click.stop="addFirstMenu(propJson.menuJson)">添加菜单</el-button>
            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="item1.index" v-for="(item1, index1) in propJson.menuJson">
                        <template #title>
                            <div class="collapseTitle">
                                <span>菜单名称：{{item1.title}}</span>
                                <el-button type="primary" plain size="small" style="margin-left: 20px" @click.stop="addMenu(item1, index1)">添加子菜单</el-button>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(propJson.menuJson, index1)">删除菜单</el-button>
                            </div>
                        </template>
                        <div>
                            <el-form-item label="菜单名称">
                                <el-input v-model="item1.title" style="width: 100%" placeholder="菜单名称" />
                            </el-form-item>
                            <el-form-item label="关联菜单">
                                <el-select v-model="item1.routeTo" placeholder="菜单名称" style="width: 100%">
                                    <el-option v-for="info in componentInfoList" :label="info.cnName" :value="info.routeTo">
                                        {{info.cnName}}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="margin-left: 5%">
                            <el-collapse>
                                <el-collapse-item :name="item2.index" v-for="(item2, index2) in item1.children">
                                    <template #title>
                                        <div class="collapseTitle">
                                            <span>菜单名称：{{item2.title}}</span>
                                            <el-button type="primary" plain size="small" style="margin-left: 20px" @click.stop="addMenu(item2, index2)">添加子菜单</el-button>
                                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(item1.children, index2)">删除菜单</el-button>
                                        </div>
                                    </template>
                                    <div>
                                        <el-form-item label="子菜单名称">
                                            <el-input v-model="item2.title" style="width: 100%" placeholder="子菜单名称" />
                                        </el-form-item>
                                        <el-form-item label="关联菜单">
                                            <el-select v-model="item2.routeTo" placeholder="菜单名称" style="width: 100%">
                                                <el-option v-for="info in componentInfoList" :label="info.cnName" :value="info.routeTo">
                                                    {{info.cnName}}
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="margin-left: 5%">
                                        <el-collapse>
                                            <el-collapse-item :name="item3.index" v-for="(item3, index3) in item2.children">
                                                <template #title>
                                                    <div class="collapseTitle">
                                                        <span>菜单名称：{{item3.title}}</span>
                                                        <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(item2.children, index3)">删除菜单</el-button>
                                                    </div>
                                                </template>
                                                <div>
                                                    <el-form-item label="子菜单名称">
                                                        <el-input v-model="item3.title" style="width: 100%" placeholder="子菜单名称" />
                                                    </el-form-item>
                                                    <el-form-item label="关联菜单">
                                                        <el-select v-model="item3.routeTo" placeholder="菜单名称" style="width: 100%">
                                                            <el-option v-for="info in componentInfoList" :label="info.cnName" :value="info.routeTo">
                                                                {{info.cnName}}
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script>

import {menuAllInfoQuery} from "@/request/menu";

export default {
    name: "MenuDrawer",
    props: ['commonParam'],
    data() {
        return {
            componentInfoList: []
        }
    },
    methods: {
        addFirstMenu(item) {
            let itemInfo = {
                title: "菜单",
                routeTo: "",
                children: []
            }
            item.push(itemInfo)
        },
        addMenu(item, index) {
            let itemInfo = {
                title: "菜单",
                routeTo: "",
                children: []
            }
            item.children.push(itemInfo)
        },
        deleteMenu(item, index) {
            // 删除数组中的数据
            item.splice(index, 1);
        }
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    created() {
        menuAllInfoQuery().then(res => {
            this.componentInfoList = res.data;
        })
    }
}
</script>

<style scoped lang="less">
.collapseTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>